<template>
    <div>
        <h4>基础篇-插槽</h4>
        <!-- 默认插槽 -->
        <defaults>Hello 你好</defaults>


        <!-- 具名插槽 -->
        <havename>
            <template v-slot:Hleft>
                <div>确认</div>
            </template>
            <template v-slot:Hright>
                <div>取消</div>
            </template>
        </havename>

        <!-- 动态插槽名 -->
        <havename>
            <template v-slot:[Hl]>
                <div>确认</div>
            </template>
            <template #[Hr]>
                <div>取消</div>
            </template>
        </havename>


        <!-- 作用域插槽 本质是：子组件提供数据，父组件使用数据 或是如何显示数据 -->
        <roledomain>
            <template #role-left="params">
                <slot>{{ params.count }}</slot>
            </template>
            <template v-slot:role-right="params">
                <slot>{{ params.user.text }}</slot>
            </template>
        </roledomain>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import defaults from './default.vue';
import havename from './havename.vue';
import roledomain from './roledomain.vue';

let Hl = ref("Hleft")
let Hr = ref("Hright")
</script>

<style lang="scss" scoped></style>